window.addEventListener("load", function () {
  var arrow_l = document.querySelector(".arrow-l"),
    arrow_r = document.querySelector(".arrow-r");
  var focus = document.querySelector(".focus");
  var focusWidth = focus.offsetWidth;
  var num = 0;
  focus.addEventListener("mouseenter", function () {
    arrow_l.style.display = "block";
    arrow_r.style.display = "block";
    clearInterval(timer);
    timer = null; //清除
  });
  focus.addEventListener("mouseleave", function () {
    arrow_l.style.display = "none";
    arrow_r.style.display = "none";
    timer = setInterval(function () {
      arrow_r.click();
    }, 2000);
  });
  var ul = focus.querySelector("ul");
  var ol = focus.querySelector("ol");
  // 通过自定义属性设置索引号
  for (let i = 0; i < ul.children.length; i++) {
    var li = document.createElement("li");
    li.setAttribute("index", i);
    ol.appendChild(li);
  }
  ol.children[0].className = "current";
  for (let i = 0; i < ol.children.length; i++) {
    ol.children[i].addEventListener("click", function () {
      for (let i = 0; i < ol.children.length; i++)
        ol.children[i].classList.remove("current");
      this.classList.add("current");
      move(ul, -focusWidth * this.getAttribute("index"));
      num = this.getAttribute("index");
    });
  }
  var first = ul.children[0].cloneNode(true);
  ul.appendChild(first);
  var flag = true;
  arrow_r.addEventListener("click", function () {
    //无缝滚动
    if (flag) {
      flag = false;
      if (num == ul.children.length - 1) {
        ul.style.left = 0;
        num = 0;
      }
      num++;
      move(ul, -num * focusWidth, function () {
        flag = true;
      });
      circleChange();
    }
  });
  arrow_l.addEventListener("click", function () {
    if (flag) {
      flag = false;
      if (num === 0) {
        ul.style.left = -focusWidth * ul.children.length + "px";
        num = ul.children.length - 1;
      }
      num--;
      move(ul, -num * focusWidth, function () {
        flag = true;
      });
      circleChange();
    }
  });
  function circleChange() {
    for (let i = 0; i < ol.children.length; i++) {
      ol.children[i].classList.remove("current");
      if (i == num % ol.children.length)
        ol.children[i].classList.add("current");
    }
  }
  var timer = setInterval(function () {
    arrow_r.click();
  }, 2000);
});
